<template>
	<view class="left clearfix detail-box">
		<view class="uni-header left clearfix" v-if="!loading">
			<label>
				审核店铺 / 店铺详情
			</label>
		</view>
		<loading v-if="loading"></loading>
		<view class="detail-content left clearfix" v-else>
			<uni-table border stripe emptyText="暂无更多数据" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">店铺分类</uni-td>
					<uni-td>{{categories.name}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">店铺名称</uni-td>
					<uni-td>{{shopExamine.title}}</uni-td>
				</uni-tr>
				<uni-tr v-if="shopExamine.logo && shopExamine.logo.url">
					<uni-td align="center" class="detail-uni-td-weight">店铺logo</uni-td>
					<uni-td>
						<image :src="shopExamine.logo.url" @click="previewImage(shopExamine.logo.url,shopExamine.logo.url)"
							mode="aspectFill" style="width:70px;height:70px;"></image>
					</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">店铺地址</uni-td>
					<uni-td>{{shopExamine.address}} {{shopExamine.poiname}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">营业时间</uni-td>
					<uni-td>{{shopExamine.tradeTime}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">联系电话</uni-td>
					<uni-td>{{shopExamine.tel}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">配送时间</uni-td>
					<uni-td>{{shopExamine.delivery_timeliness}}分钟</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">店铺照片</uni-td>
					<uni-td class="detail-image" v-if="shopExamine.photo">

						<label v-for="(item,index) in shopExamine.photo">
							<image :src="item.url" @click="previewImage(item.url,item.url)" mode="aspectFill"
								style="width:70px;height:70px;"></image>
						</label>

					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">起送费</uni-td>
					<uni-td>￥{{shopExamine.start_delivery_price}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">配送费</uni-td>
					<uni-td>￥{{shopExamine.delivery_price}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">打包费</uni-td>
					<uni-td>￥{{shopExamine.pack_price}}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">自动接单</uni-td>
					<uni-td v-if="shopExamine.auto_order==true">
						<font style="color:#00c296;">是</font>
					</uni-td>
					<uni-td v-else>
						<font style="color:#ff3333;">是</font>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">可预订</uni-td>
					<uni-td v-if="shopExamine.is_book==true">
						<font style="color:#00c296;">是</font>
					</uni-td>
					<uni-td v-else>
						<font style="color:#ff3333;">是</font>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">可外卖</uni-td>
					<uni-td v-if="shopExamine.is_take_away==true">
						<font style="color:#00c296;">是</font>
					</uni-td>
					<uni-td v-else>
						<font style="color:#ff3333;">是</font>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">出餐时间</uni-td>
					<uni-td>{{shopExamine.dining_out_time}}分钟</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">法人姓名</uni-td>
					<uni-td>{{shopAuthentication.legal_person_name?shopAuthentication.legal_person_name:'暂未填写'}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">法人证件号</uni-td>
					<uni-td>{{shopAuthentication.legal_person_card?shopAuthentication.legal_person_card:"暂未填写"}}</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">法人证件照</uni-td>
					<uni-td class="detail-id-card">
						<view v-if="shopAuthentication.legal_person_card_photo_z ">
							<label  >
								<image
									@click="previewImage(shopAuthentication.legal_person_card_photo_z.url,shopAuthentication.legal_person_card_photo_z.url)"
									:src="shopAuthentication.legal_person_card_photo_z.url" mode="aspectFill"
									style="width:100%;height:100%;"></image>
							</label>
							<label v-if="shopAuthentication.legal_person_card_photo_f" >
								<image
								
									@click="previewImage(shopAuthentication.legal_person_card_photo_f.url,shopAuthentication.legal_person_card_photo_f.url)"
									:src="shopAuthentication.legal_person_card_photo_f.url" mode="aspectFill"
									style="width:100%;height:100%;"></image>
							</label>
						</view>
						<view v-else>
							暂未上传
						</view>
					</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">营业执照名称</uni-td>
					<uni-td>{{shopAuthentication.business_license_title?shopAuthentication.business_license_title:'暂未填写'}}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">纳税人识别码</uni-td>
					<uni-td>{{shopAuthentication.business_license_number?shopAuthentication.business_license_number:"暂未填写"}}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">营业执照注册地址</uni-td>
					<uni-td>{{shopAuthentication.business_license_address?shopAuthentication.business_license_address:"暂未填写"}}</uni-td>
				</uni-tr>

				<uni-tr v-if="shopAuthentication.business_license_photo">
					<uni-td align="center" class="detail-uni-td-weight">营业执照照片</uni-td>
					<uni-td class="detail-id-card">
						<label v-if="shopAuthentication.business_license_photo" >
							<image
								@click="previewImage(shopAuthentication.business_license_photo.url,shopAuthentication.business_license_photo.url)"
								:src="shopAuthentication.business_license_photo.url" mode="aspectFill"
								style="width:100%;height:100%;"></image>
						</label>
						<view v-else>
							暂未上传
						</view>
					</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">食品经营许可证编号</uni-td>
					<uni-td>{{shopAuthentication.permit_number?shopAuthentication.permit_number:'暂未填写'}}</uni-td>
				</uni-tr>

				<uni-tr v-if="shopAuthentication.permit_photo && shopAuthentication.permit_photo.url">
					<uni-td align="center" class="detail-uni-td-weight">食品经营许可证照片</uni-td>
					<uni-td class="detail-id-card">
						<label>
							<image
								@click="previewImage(shopAuthentication.permit_photo.url,shopAuthentication.permit_photo.url)"
								:src="shopAuthentication.permit_photo.url" mode="aspectFill" style="width:100%;height:100%;">
							</image>
						</label>

					</uni-td>
				</uni-tr>


				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">创建人</uni-td>
					<uni-td>{{userinfo.nickname}}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">店铺简介</uni-td>
					<uni-td>{{shopExamine.intro}}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">创建时间</uni-td>
					<uni-td>
						<uni-dateformat :date="shopExamine.create_time"></uni-dateformat>
					</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td align="center" class="detail-uni-td-weight">审核状态</uni-td>
					<uni-td v-if="shopAuthentication.audit_status==true">
						<font color="#00c296">审核通过</font>
					</uni-td>
					<uni-td v-else>
						
						<view v-if="shopAuthentication.audit_text">
							<font style="color:#ff3333">未通过</font>
							<font color="#999" style="margin-left:20px;">{{shopAuthentication.audit_text}}</font>
						</view>
						<view v-else>
							<text class="fontColorApp">待审核</text>
							<view style="color:red;font-size:13px">
								{{shopAuthentication._id?'':'资料未填写完整'}}
							</view>
						</view>
					</uni-td>
				</uni-tr>


			</uni-table>
			<view class="detail-bottom-button left clearfix">
				<view v-if="isPower(['admin'])" >
					<button class="mini-btn" :disabled="shopAuthentication._id?shopAuthentication.audit_status:true" type="primary" size="mini" @click="approved(shopExamine._id)">审核通过</button>
					<button class="mini-btn" :disabled="shopAuthentication._id?shopAuthentication.audit_status:true" type="warn" size="mini" @click="auditReject(shopExamine._id)">审核拒绝</button>
				</view>
				<view>
					<button class="mini-btn" type="default" size="mini" @click="redirectToList()">返回列表</button>
				</view>
			</view>
		</view>
		
		<!--添加审核拒绝原因弹窗-->
		<uni-popup ref="popup" type="center">
			<view class="detail-jujue-box left clearfix">
				<view class="detail-juju-title left clearfix">
					<label class="left">审核拒绝</label>
					<label class="right" @click="closePopup()">
						<uni-icons type="closeempty" size="25" color="#666"></uni-icons>
					</label>
				</view>

				<view class="detail-jujue-content left clearfix">
					<textarea v-model="formData.audit_text"
						style="width:calc(100% - 20px);height:230px;background:#f8f8f8;padding:10px;font-size:.9rem;"
						placeholder="请在此输入审核不通过原因" />
				</view>
				<view class="detail-button-box left clearfix">
					<button type="primary" @click="submitAuditReject()">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import Util from "@/js_sdk/validator/util.js"
	export default {
		data() {
			return {
				loading:true,
				shopAuthentication: {}, //审核表数据
				shopExamine: {}, //审核临时表数据
				categories: {}, //店铺分类
				userinfo: {}, //创建人信息
				formData: {
					audit_text: ''
				}
			}
		},
		onLoad(e) {
			//查询出临时表数据
			this.getShopExamine(e.id);
		},
		methods: {
			//审核拒绝弹窗
			submitAuditReject() {
				var that = this;
				var data = this.formData;
				if (!data.audit_text) {
					uni.showToast({
						title: '请填写拒绝原因',
						duration: 2000
					});
					return false;
				}
				var db = uniCloud.database();
				db.collection('shop').where({create_uid: data.create_uid}).update({create_uid: ''});
				db.collection('shop_examine').where({create_uid: data.create_uid}).update({audit_text: data.audit_text,audit_status: false}).then(res => {
					db.collection('shop_authentication').where({user_id: data.create_uid}).update({audit_text: data.audit_text,audit_status: false}).then(result => {
						uni.showToast({title: '提交成功',duration: 2000});
						setTimeout(function() {
							that.formData.audit_text = '';
							that.$refs.popup.close();
							uni.reLaunch({
								url: './detail?id=' + that.shopExamine._id
							});
						}, 2000);
					});
				});
			},
			//关闭弹窗
			closePopup() {
				this.$refs.popup.close();
			},
			//审核拒绝
			auditReject(id) {
				this.$refs.popup.open();
			},
			//返回列表
			redirectToList() {
				uni.redirectTo({
					url: './list'
				});
			},
			//审核通过
			approved(id) {
				var that = this;
				var db = uniCloud.database();
				uni.showModal({
					title: '提示',
					content: '请确保该店铺每一项都正确无误，确定要这么做吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({title:"加载中···"})
							//将临时表的数据更新或新增到店铺表
							var shop = that.shopExamine;
							var id = shop._id;
							var shopId = shop.shop_id;
							delete shop.tradeTime;
							delete shop.shop_id;
							delete shop.create_time;
							delete shop._id;
							delete shop.audit_status;
							delete shop.audit_text;
							delete shop.monthly_sales;
							delete shop.create_ip;
							delete shop.goods;
							delete shop.preferential;
							shop.start_delivery_price = 1000;
							if (shopId) {
								if(shopId.length < 10){
									return uni.showModal({
										title:"失败,请联系管理员",
										content:"不要再操作了,请联系管理员"
									})
								}
								db.collection('shop').where({ _id: shopId }).update(shop).then(updateRes => {
									//更新审核表
									that.updateShopAuthentication(shop.create_uid, shopId);
								});
							} else {
								db.collection('shop').add(shop).then(addRes => {
									var shopId = addRes.result.id;
									that.updateShopAuthentication(shop.create_uid, shopId);
								});
							}
							uni.hideLoading()
							
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//更新审核表id
			updateShopAuthentication(userId, shopId) {
				var that = this;
				var db = uniCloud.database();
				if (shopId) {
					db.collection('shop_examine').where({
						create_uid: userId
					}).update({
						shop_id: shopId,
						audit_status: true,
						audit_text: '审核通过'
					});
					db.collection('shop_authentication').where({
						user_id: userId
					}).update({
						shop_id: shopId
					});
				}
				db.collection('shop_authentication').where({
					user_id: userId
				}).update({
					audit_status: true,
					audit_text: '审核通过'
				}).then(res => {
					//删除临时表
					//db.collection('shop_examine').where({create_uid:userId}).remove();
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
					setTimeout(function() {
						location.reload();
					}, 2000);
				});
			},
			//预览图片
			previewImage(file, currentFile) {
				var fileArray = [];
				fileArray.push(file);
				uni.previewImage({
					urls: fileArray,
					current: currentFile
				});
			},
			getShopExamine(id) {
				var that = this;
				var db = uniCloud.database();
				db.collection('shop_examine').where({_id: id}).get({getOne: true,customUI:true}).then(res => {
					var shopExamine = res.result.data;
					that.formData.create_uid = shopExamine.create_uid;
					//处理营业时间
					if (shopExamine.start_business_hours1 && shopExamine.end_business_hours1) {
						var startTime1 = shopExamine.start_business_hours1.substr(0, 2) + ':' + shopExamine
							.start_business_hours1.substr(2, 2);
						var endTime1 = shopExamine.end_business_hours1.substr(0, 2) + ':' + shopExamine
							.end_business_hours1.substr(2, 2);
					}
					if (shopExamine.start_business_hours2 && shopExamine.end_business_hours2) {
						var startTime2 = shopExamine.start_business_hours2.substr(0, 2) + ':' + shopExamine
							.start_business_hours2.substr(2, 2);
						var endTime2 = shopExamine.end_business_hours2.substr(0, 2) + ':' + shopExamine
							.end_business_hours2.substr(2, 2);
						var tradeTime = ' ' + startTime2 + '至' + endTime2;
					}
					if (tradeTime) {
						shopExamine.tradeTime = startTime1 + '至' + endTime1 + tradeTime;
					} else {
						shopExamine.tradeTime = startTime1 + '至' + endTime1;
					}
					//查询出审核表状态
					that.getShopAuthentication(shopExamine.create_uid);
					//查询出分类名称
					that.getCategories(shopExamine.categories);
					//查询出创建人
					that.getCreateName(shopExamine.create_uid);
					that.shopExamine = shopExamine;
					// console.log('临死表数据', shopExamine);
					
				});
			},
			//查询出创建人
			getCreateName(uid) {
				var db = uniCloud.database();
				db.collection('uni-id-users').where({
					_id: uid
				}).field('_id,nickname').get({
					getOne: true
				}).then(res => {
					this.userinfo = res.result.data;
				});
			},
			//查询出审核表数据
			getShopAuthentication(userId) {
				var db = uniCloud.database();
				db.collection('shop_authentication').where({user_id: userId}).get({getOne: true}).then(result => {
					if (!result.result.data) {
						this.loading = false
					}else{
						this.shopAuthentication = result.result.data
						console.log(result.result.data);
						this.loading = false
					}
				});
			},
			//查询出店铺分类
			getCategories(id) {
				var db = uniCloud.database();
				db.collection('opendb-mall-categories').where({
					_id: id
				}).field('_id,name').get({
					getOne: true
				}).then(result => {
					var categories = result.result.data;
					this.categories = categories;
					// console.log('店铺分类', categories);
				});
			},
			isPower(admin=['']){
				return Util.userHasPermission(admin)
			}
		}
	}
</script>

<style scoped>
	.detail-button-box button {
		width: 50%;
		margin-left: 25%;
	}

	.detail-button-box {
		width: 100%;
		margin-top: 20px;
	}

	.detail-jujue-content {
		width: 94%;
		margin-left: 3%;
		height: 250px;
		border: 1px solid #eee;
		margin-top: 20px;
		border-radius: 5px;
	}

	.detail-juju-title label:last-child {
		margin-right: 1rem;
	}

	.detail-juju-title label:first-child {
		margin-left: 1rem;
		font-weight: bold;
		color: #666;
	}

	.detail-juju-title label {
		line-height: 3rem;
		height: 3rem;
		font-size: 1rem;
	}

	.detail-juju-title {
		height: 3rem;
		width: 100%;
		border-bottom: 1px solid #efefef;
	}

	.detail-jujue-box {
		width: 700px;
		height: 400px;
		background: #fff;
		border-radius: 5px;
	}

	.detail-bottom-button button {
		margin-right: 20px;
	}

	.detail-bottom-button {
		height: 50px;
		line-height: 50px;
		margin-top: 50px;
		margin-bottom: 50px;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.detail-uni-td-weight {
		font-weight: bold;
	}

	.detail-id-card label {
		float: left;
		width: 300px;
		height: 180px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-left: 20px;
	}

	.detail-image label {
		float: left;
		width: 70px;
		height: 70px;
		border: 1px solid #ccc;
		margin: 10px;
	}

	.uni-header {
		width: 100%;
	}

	.detail-box {
		width: 100%;
		min-height: 800px;
		background: #fff;
	}

	.detail-content {
		width: 90%;
		min-height: 600px;
		margin-left: 5%;
		margin-top: 20px;
	}
</style>